<!--
 * @Author: zxh
 * @Email: 1271027008@qq.com
 * @Date: 2020-02-24 08:53:29
 * @Descripttion: 库房安全库存
 -->

<div class="safemanage_list">
    <div nz-row nzGutter="16" class="row_1">
        <div nz-col nzSpan="10"></div>
        <div nz-col nzSpan="8">
            <label>库房库区：</label>
            <nz-select nzDropdownClassName="select_custom" [(ngModel)]="kfID" class="selecta"
                (ngModelChange)="selectedKF($event)">
                <nz-option nzValue="" nzLabel="-请选择-"></nz-option>
                <nz-option *ngFor="let item of KFList" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
            </nz-select>
            <span> - </span>
            <nz-select nzDropdownClassName="select_custom" [(ngModel)]="kqID" class="selecta"
                (ngModelChange)="selectedKQ($event)">
                <nz-option nzValue="" nzLabel="-请选择-"></nz-option>
                <nz-option *ngFor="let item of KQList" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
            </nz-select>
        </div>
        <div nz-col nzSpan="6">
            <label>存料类型：</label>
            <nz-select nzDropdownClassName="select_custom" [(ngModel)]="clType" class="selectb"
                (ngModelChange)="selectedCl($event)">
                <nz-option nzValue="" nzLabel="-请选择-"></nz-option>
                <nz-option *ngFor="let item of CLList" [nzValue]="item.value" [nzLabel]="item.label"></nz-option>
            </nz-select>
        </div>
    </div>
    <div nz-row class="table_row_1">
        <nz-table class="list_table" [nzBordered]="true" nzTitle="库房库区列表" #rowSelectionTable [nzData]="topListOfData"
            [nzFrontPagination]="false"  nzSize="small">
            <thead>
                <tr>
                    <th>库房</th>
                    <th>库区</th>
                    <th>存料类型</th>
                    <!-- <th>操作</th> -->
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let data of rowSelectionTable.data" (click)="selectDetail(data.id,data.warehouseId)" 
                    [class]="selectedKQId==data.id?'ant-table-row ng-star-inserted active':'ant-table-row ng-star-inserted'">
                    <td>{{ data.warehouseName }}</td>
                    <td>{{ data.name }}</td>
                    <td>{{ data.materialCategoryLabel }}</td>
                    <!-- <td>
                        <a href="javascript:void(0);" nz-button nzType="default" (click)="selectDetail(data.id,data.warehouseId)"
                            [class]="selectedKQId==data.id?'ant-btn ant-btn-default ant-btn-icon-only active':'ant-btn ant-btn-default ant-btn-icon-only'">
                            <i nz-icon nzType="eye"></i>
                        </a>
                        <a  nz-button nzType="default" (click)="selectDetail(data.id,data.warehouseId)"
                        [class]="selectedKQId==data.id?'ant-btn ant-btn-default ant-btn-icon-only active':'ant-btn ant-btn-default ant-btn-icon-only'">
                        <i nz-icon nzType="eye"></i>
                    </a>
                    </td> -->
                </tr>
            </tbody>
        </nz-table>
        <div nz-col nzSpan="24" class="page_row" style="text-align: right;margin-top: 10px;">
            <nz-pagination [(nzPageSize)]="pageSize" [(nzPageIndex)]="topIndex" [nzTotal]="totalSizeTop"
                [nzShowTotal]="topTemplateTop" (nzPageIndexChange)="clickPageTop($event)">
            </nz-pagination>
            <ng-template #topTemplateTop let-total> 总共 {{totalSizeTop}} 条 </ng-template>
        </div>
    </div>
    <div nz-row class="line_row"></div>
    <div id="wlTable">
        <div nz-row nzGutter="16" class="row_2">
            <div nz-col nzSpan="1">
                <!-- <button nz-button nzType="" [disabled]="numberOfChecked !== 1"
                [class]="numberOfChecked !== 1?'ant-btn ant-btn-primary defaultSaveBg disabledBg':'ant-btn ant-btn-primary defaultSaveBg'">
                <i nz-icon nzType="check" nzTheme="outline"></i>保存
            </button> -->
                <button *ngIf="power.edit" nz-button (click)="editKC()" nzType="" [disabled]="numberOfChecked !== 1"
                    [class]="numberOfChecked !== 1?'ant-btn ant-btn-primary defaultEditBg disabledBg':'ant-btn ant-btn-primary defaultEditBg'">
                    保存
                </button>
            </div>
            <div nz-col nzSpan="13"></div>
            <div nz-col nzSpan="5">
                <label>物料编码：</label>
                <input class="width-70" nz-input appHotSearch (hotSearchEmit)="getMaterialList('search')" placeholder="请输入物料编码"
                    [(ngModel)]="materialCode" />
            </div>
            <div nz-col nzSpan="5">
                <label>物料名称：</label>
                <input class="width-70" nz-input appHotSearch (hotSearchEmit)="getMaterialList('search')" placeholder="请输入物料名称"
                    [(ngModel)]="materialName" />
            </div>
        </div>
        <div nz-row class="table_row_2">
            <nz-table class="list_table" [nzBordered]="true" nzTitle="库房安全库存列表" #rowSelectionTable2
                [nzData]="bottomListOfData" [nzFrontPagination]="false"
                (nzCurrentPageDataChange)="currentPageDataChange($event)"  nzSize="small">
                <thead>
                    <tr>
                        <th nzShowCheckbox [(nzChecked)]="isAllDisplayDataChecked" [nzIndeterminate]="isIndeterminate"
                            (nzCheckedChange)="checkAll($event)"></th>
                        <th>物料编码</th>
                        <th>物料名称</th>
                        <th>单位</th>
                        <th>最高储量</th>
                        <th>安全储量</th>
                        <!-- <th>采购周期</th>
                        <th>入库周期</th> -->
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let data of rowSelectionTable2.data">
                        <td nzShowCheckbox [(nzChecked)]="mapOfCheckedId[data.id]"
                            (nzCheckedChange)="refreshStatus(data.id)">
                        </td>
                        <td>{{ data.materialCode }}</td>
                        <td>{{ data.materialName }}</td>
                        <td>{{ data.materialUnit }}</td>
                        <td>
                            <input [disabled]="idList.includes(data.id)" nz-input type="text" [(ngModel)]="data.maxAmount">
                        </td>
                        <td>
                            <input [disabled]="idList.includes(data.id)" nz-input type="text" [(ngModel)]="data.safeAmount">
                        </td>
                        <!-- <td>
                            <span *ngIf="!idList.includes(data.id)">{{ data.purchasingCycle }}</span>
                            <input *ngIf="idList.includes(data.id)" nz-input type="text"
                                [(ngModel)]="data.purchasingCycle">
                        </td>
                        <td>
                            <span *ngIf="!idList.includes(data.id)">{{ data.inStockCycle }}</span>
                            <input *ngIf="idList.includes(data.id)" nz-input type="text"
                                [(ngModel)]="data.inStockCycle">
                        </td> -->
                    </tr>
                </tbody>
            </nz-table>
            <div nz-col nzSpan="24" class="page_row" style="text-align: right;margin-top: 10px;">
                <nz-pagination [(nzPageSize)]="pageSize" [(nzPageIndex)]="page" [nzTotal]="totalSize"
                    [nzShowTotal]="topTemplate" (nzPageIndexChange)="clickPage($event)">
                </nz-pagination>
                <ng-template #topTemplate let-total> 总共 {{totalSize}} 条 </ng-template>
            </div>
        </div>
    </div>
</div>